<html>
<script language="javascript" src="trimpath/template.js"></script>
	<head>
		
		<script language="javascript">
	var data = {
		products : [ {
			name : "mac",
			desc : "computer",
			price : 1000,
			quantity : 100,
			alert : null
		}, {
			name : "ipod",
			desc : "music player",
			price : 200,
			quantity : 200,
			alert : "on sale now!"
		}, {
			name : "cinema display",
			desc : "screen",
			price : 800,
			quantity : 300,
			alert : "best deal!"
		} ],
		customer : {
			first : "John",
			last : "Public",
			level : "gold"
		}
	};
	//alert(data);
	//debugObj(data);
</script>
		<title>jst_demo</title>
	</head>
	<body>
		<!-- <textarea id="cart_jst" style="display:none;"> -->
		<textarea id="cart_jst"  style="display:none;">  
    Hello ${customer.first} ${customer.last}.<br /> 
    Your shopping cart has ${products.length} item(s): 
    <table> 
     <tr>
					<td>Name</td>
					<td>Description</td> 
         <td>Price</td>
					<td>Quantity & Alert</td>
				</tr> 
     {for p in products} 
         <tr>
					<td>${p.name|capitalize}</td>
					<td>${p.desc}</td> 
             <td>$${p.price}</td>
					<td>${p.quantity} : ${p.alert|default:""|capitalize}</td> 
             </tr> 
     {forelse} 
         <tr>
					<td colspan="4">No products in your cart.																
				
				
				</tr> 
     {/for} 
    </table> 
    {if customer.level == "gold"} 
      We love you!  Please check out our Gold Customer specials! 
    {else} 
      Become a Gold Customer by buying more stuff here. 
    {/if} 
  </textarea>

		<script language="javascript">
	//一句话搞定解析并赋值,cart_jst是textarea的id，data是之前定义的数据
	//现在result已经包含解析过的模板文件内容了
	//var result = TrimPath.processDOMTemplate("cart_jst", data);

	//也可以分两步走，先解析，再赋值
	//var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");
	//var result = myTemplateObj.process(data);
	//也可以给这个模板一个新的数据源
	//var result2 = myTemplateObj.process(differentData);

	//输出结果
	//someOutputDiv.innerHTML = result;
</script>

		<script>
	function debugObj(obj) {
		var s = "";
		for (k in obj) {
			s += k + "=" + obj[k] + "\n";
		}
		alert(s);
	}
</script>

		<div id="outputdiv">
		</div>
		<script language="javascript">
	var myStr = "Hello ${customer.first} ${customer.last}, Welcome back!";
	result = myStr.process(data);
	//alert(result);
	var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");
	//alert(myTemplateObj);
	var result1 = myTemplateObj.process(data);
	//或者直接使用process方法，还省去了一个中间变量
	//result = "Hello ${customer.first} ${customer.last}, Welcome back!".process(data);
	//alert(result);
	//The result: "Hello John Public, Welcome back!"
	//跟下面的效果是一样
	//result = "Hello " + customer.first + " " + customer.last+ ", Welcome back!";

	//或者先解析，再赋值
	//var myTemplateObj = TrimPath.parseTemplate(myStr);
	//var result = myTemplateObj.process(data);

	//var result2 = myTemplateObj.process(differentData);
	document.getElementById("outputdiv").innerHTML = '<font color=red>' + result1 + '</font>';
</script>

	</body>
</html>